<template>
    <!-- 近7天餐厅总数和推进情况 -->
    <div class="restaurant-propel">
        <echart-title title="近7天餐厅总数和推进情况"></echart-title>
        <div class="restaurant-content bj-flex-center">
            <div class="restaurant-echart" ref="restaurantId"></div>
        </div>
    </div>
</template>

<script>
import echartTitle from "@/components/echartTitle.vue";
export default {
    components:{
        echartTitle
    },
    props:{
        
    },
    data () {
        return {
            
        }
    },
     mounted () {
        this.initChart();
    },
    methods: {
        initChart(){
            // 初始化 echarts 实例
            const myChart = this.$echarts.init(this.$refs.restaurantId);
             // 指定图表的配置项和数据
            const option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: [
                        {
                            name: '餐厅总数'
                        },{
                            name: '有推进的餐厅数'
                        }
                    ],
                    left: "52%",
                    top:"4%",
                    textStyle: {
                        color: "#A1D5FF",
                        fontSize: 12
                    }, 
                    type:'plain',
                    icon:'rect',
                    itemWidth: 12,  // 设置宽度
                    itemHeight: 12,
                    itemGap: 12, // 设置间距

                },
                grid: {
                    top: '15%',
                    right: '3%',
                    left: '7%',
                    bottom: '12%'
                },
                xAxis: [{
                    type: 'category',
                    data: ['8-01','8-02','8-03','8-04','8-05'],
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(13, 49, 114, 1)'
                        }
                    },
                    axisLabel: {
                        margin: 10,
                        color: '#AACBDE',
                        textStyle: {
                            fontSize: 14
                        },
                    },
                }],
                yAxis: [{
                    axisLabel: {
                        formatter: '{value}',
                        color: '#AACBDE',
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: 'rgba(13, 49, 114, 1)'
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(13, 49, 114, 1)'
                        }
                    }
                }],
                series: [{
                    name:'餐厅总数',
                    type: 'bar',
                    data: [100,300,201,301,701],
                    barWidth: '12px',
                    itemStyle: {
                        normal: {
                            color: '#65C8FF',
                            barBorderRadius: [30, 30, 30, 30],
                            shadowBlur: 4,
                        }
                    },
                },{
                    name:'有推进的餐厅数',
                    type: 'bar',
                    data: [102,201,901,133,220],
                    barWidth: '12px',
                    itemStyle: {
                        normal: {
                            color: '#59F293',
                            barBorderRadius: [30, 30, 30, 30],
                            shadowBlur: 4,
                        }
                    },
                }]
            }
        
            // 使用配置项显示图表
            myChart.setOption(option);
        }
    }
};
</script>

<style lang="scss" class>
.restaurant-propel{
    width: 456px;
    height: 340px;
    .restaurant-content{
        width: 100%;
        height: 298px;
        background: linear-gradient( 180deg, rgba(7,29,65,0.1) 0%, rgba(10,47,107,0.4) 100%);
        border: 1px solid;
        border-image: linear-gradient(180deg, rgba(34, 83, 135, 1), rgba(42, 112, 186, 1), rgba(34, 83, 135, 1), rgba(57, 128, 202, 1), rgba(34, 83, 135, 1)) 1 1;
    }
    .restaurant-echart{
        width: 436px;
        height: 298px;
    }
}
</style>